<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12京东左侧导航条</title>
    <link rel="stylesheet" href="./resource/reset.css">
    <style>
        body{
            background-color: rgb(244,244,244);
        }
        div{
            width: 190px;
            height: 450px;
            padding: 10px 0px;
            background-color: white;
        }
        ul{
            width: 100%;
            
        }
        li{
            font-size: 14px;
            padding-left: 18px;
            height: 25px;
            /* 设置列表文字居中 */
            line-height: 25px;
        }
        li:hover{
            background-color: rgb(217,217,217);
        }
        a{
            text-decoration: none;
            color: black;
            
        }
        a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>
                <a href="http://www.baidu.com">家用电器</a>
            </li>
            <li>
                <a href="https//www.baidu.com">手机</a>/<a href="https//www.baidu.com">运营商</a>/<a href="https//www.baidu.com">数码</a>
            </li>
            <li>
                <a href="https//www.baidu.com">电脑</a>/<a href="https//www.baidu.com">办公</a>
            </li>
            <li>
                <a href="https//www.baidu.com">家居</a>/<a href="https//www.baidu.com">家具</a>/
                <a href="https//www.baidu.com">家装</a>/<a href="https//www.baidu.com">厨具</a>
            </li>
            <li>
                <a href="https//www.baidu.com">男装</a>/<a href="https//www.baidu.com">女装</a>/
                <a href="https//www.baidu.com">童装</a>/<a href="https//www.baidu.com">内衣</a>
            </li>
            <li>
                <a href="https//www.baidu.com">美妆</a>/<a href="https//www.baidu.com">个护清洁</a>/
                <a href="https//www.baidu.com">宠物</a>
            </li>
            <li>
                <a href="https//www.baidu.com">女鞋</a>/<a href="https//www.baidu.com">箱包</a>/
                <a href="https//www.baidu.com">钟表</a>/<a href="https//www.baidu.com">珠宝</a>
            </li>
            <li>
                <a href="https//www.baidu.com">男鞋</a>/<a href="https//www.baidu.com">运动</a>/
                <a href="https//www.baidu.com">户外</a>
            </li>
            <li>
                <a href="https//www.baidu.com">房产</a>/<a href="https//www.baidu.com">汽车</a>/
                <a href="https//www.baidu.com">汽车用品</a>
            </li>
            <li>
                <a href="https//www.baidu.com">母婴</a>/<a href="https//www.baidu.com">玩具乐器</a>
            </li>
            <li>
                <a href="https//www.baidu.com">食品</a>/<a href="https//www.baidu.com">酒类</a>/
                <a href="https//www.baidu.com">生鲜</a>/<a href="https//www.baidu.com">特产</a>
            </li>
            <li>
                <a href="https//www.baidu.com">艺术</a>/<a href="https//www.baidu.com">礼品鲜花</a>/
                <a href="https//www.baidu.com">农资绿植</a>
            </li>
            <li>
                <a href="https//www.baidu.com">医药保健</a>/<a href="https//www.baidu.com">计生情趣</a>
            </li>
            <li>
                <a href="https//www.baidu.com">图书</a>/<a href="https//www.baidu.com">文娱</a>/
                <a href="https//www.baidu.com">教育</a>/<a href="https//www.baidu.com">电子书</a>
            </li>
            <li>
                <a href="https//www.baidu.com">机票</a>/<a href="https//www.baidu.com">酒店</a>/
                <a href="https//www.baidu.com">旅游</a>/<a href="https//www.baidu.com">生活</a>
            </li>
            <li>
                <a href="https//www.baidu.com">众筹</a>/<a href="https//www.baidu.com">白条</a>/
                <a href="https//www.baidu.com">保险</a>
            </li>
            <li>
                <a href="https//www.baidu.com">安装</a>/<a href="https//www.baidu.com">维修</a>/
                <a href="https//www.baidu.com">清洗</a>/<a href="https//www.baidu.com">二手</a>
            </li>
            <li>
                <a href="https//www.baidu.com">工业品</a>
            </li>
        </ul>
    </div>
</body>
</html>